<template>
	<view class="list">
		<block v-for="item in list" :key="item.id">
			<view class="item">
				<view class="item-tit u-flex u-row-between u-p-b-10 u-font-lg">
					<view>报名时间：2020-1-1到2020-2-4</view>
					<view class="">抖音</view>
				</view>
				<view class="item-box">
					<view class="item-box-image">
						<u-image
							class="image" 
							width="180rpx" 
							height="180rpx" 
							:src="item.url"></u-image>
					</view>
					<view class="info">
						<view class="title u-font-lg">
							一行商品名称一行商品名称一
						</view>
						<view class="info-item u-flex">
							<u-image
								class="image" 
								width="40rpx" 
								height="40rpx" 
								src="/static/icons/brand_icon.png"></u-image>
								<view class="text u-font-sm">品牌名称:</view>
							<view class="num u-font-sm">耐克</view>
						</view>
						<view class="info-item u-flex">
							<u-image
								class="image" 
								width="40rpx" 
								height="40rpx" 
								src="/static/icons/fans_icon.png"></u-image>
								<view class="text u-font-sm">粉丝要求:</view>
							<view class="num u-font-sm">1000<text class="u-font-xs">+</text></view>
						</view>
						<view class="info-item u-flex u-row-between">
							<view class="u-flex">
								<u-image
									class="image" 
									width="40rpx" 
									height="40rpx" 
									src="/static/icons/checked_icon.png"></u-image>
								<view class="text u-font-sm look">1000查看/19小时前</view>
							</view>
						</view>
					</view>
				</view>
				<view class="con u-flex u-text-center u-m-t-10">
					<view class="li">
						<view class="num">260/600</view>
						<text class="txt">已报名</text>
					</view>
					<view class="li">
						<view class="num">180</view>
						<text class="txt">确认合作</text>
					</view>
					<view class="li">
						<view class="num">320</view>
						<text class="txt">待审核</text>
					</view>
					<view class="li">
						<view class="num">50</view>
						<text class="txt">已完成</text>
					</view>
				</view>
				<view class="btn-list u-flex">
					<view class="u-p-l-30">状态：已结束</view>
					<view class="u-p-r-30" v-if="item.id!=1">
						<u-button hover-class="none" type="default" shape="circle" size="medium" class="u-margin-right-20" @tap="clickFun('cancel',{item})">取消通告</u-button>
						<u-button hover-class="none" type="default" shape="circle" size="medium" :plain="true" @tap="clickFun('contact',{item})">编辑通告</u-button>
					</view>
					<view class="u-p-r-30" v-else>
						<u-button hover-class="none" type="default" shape="circle" size="medium" :plain="true" @tap="clickFun('order',{item})">下载合作达人表</u-button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	methods: {
		clickFun(e,item) {
			this.$emit("clickFun",e,item);
		},
	},
}
</script>

<style lang="scss" scoped>
.list {
	padding-top: 20rpx;
	.item{
		padding: 20rpx 0;
		background-color: #fff;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		.item-tit {
			border-bottom: 1px solid #eee;
			height: 60rpx;
			padding: 0 30rpx;
		}
		.item-box{
			display: flex;
			padding: 30rpx;
			.info{ 
				padding-left: 20rpx;
				width: 80%;
				.title{  
					display: flex; align-items: center;  margin-bottom: 20rpx;
					.u-font-lg{ padding-left: 20rpx; }
				}
			 } 
			 .info-item{ height:50rpx; line-height:50rpx;}
		}
		.con{
			padding: 0 30rpx;
			.li{flex: 1; line-height: 44rpx; }
			.num{ color:#333; font-size: 30rpx; }
			.txt{ color:#666; font-size: 26rpx; }
		}
		.btn-list{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			/deep/ .u-size-medium{ padding:0 40rpx; }
		}
	}
	
}
</style>
